<!--
 * 角色管理--分配数据权限
 * @author: hexiaozhen
 * @since: 2023-09-27
 * dataAuthority.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    title="分配数据权限"
    title-align="start"
    width="500px"
    draggable
    :mask-closable="false"
    @cancel="handleCancel"
  >
    <TableForm
      ref="formAndTableRef"
      :showMore="false"
      :formItems="formItems"
      :formData="formData"
      :rowspan="24"
      class="tableForm"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
const { proxy } = getCurrentInstance()
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
// 确定
const handleOk = () => {
  visibleModal.value = false
  emit('submit')
  emit('update:visible', false)
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 获取字典数据
const statusOptions = ref([])
// 表单配置
const formItems = reactive([
  { name: 'userName', label: '角色名称', type: 'a-input' },
  { name: 'nickName', label: '权限字符', type: 'a-input' },
  { name: 'phonenumber', label: '权限范围', type: 'a-select', options: statusOptions },
])
let formData = reactive({ userName: '', nickName: '', phonenumber: '' })
formData = { ...rowData.value }
//  数据字典
const getOption = async () => {
  // 是否启用
  let resSwitch = await proxy.$api.getDicts('sys_normal_disable')
  statusOptions.value = proxy.getDicOption(resSwitch.data)
}

onMounted(() => {
  getOption()
})
</script>
